/*
 * FilterWidget 数据分析筛选组件
 */
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

Item {
    id: root
    Rectangle {
        anchors.fill: parent
        radius: 4

        // 阴影
        layer.enabled: true  // 设置layer为enable
        layer.effect: DropShadow {
            radius: 21
            samples: 43
            transparentBorder: true
            color: "#4D002062"
        }

        ColumnLayout {
            anchors.fill: parent

            // 标头
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 48

                RowLayout {
                    anchors.fill: parent

                    // 筛选
                    Item {
                        Layout.fillHeight: true
                        Layout.preferredWidth: shaiXuan.width
                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                        Layout.margins: 16

                        Label {
                            id: shaiXuan
                            text: "筛选"
                            font.pixelSize: 17
                            font.family: "Alibaba PuHuiTi"
                            color: "#222"
                            verticalAlignment: Text.AlignVCenter
                        }
                    }

                    CustomHorSpacerItem {}

                    // 确定按钮
                    Rectangle {
                        Layout.fillHeight: true
                        Layout.preferredWidth: cfrmBtn.width
                        color: "transparent"
                        Layout.margins: 16
                        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter

                        Label {
                            id: cfrmBtn
                            text: "确定"
                            font.pixelSize: 17
                            font.family: "Alibaba PuHuiTi"
                            color: "#222"
                            verticalAlignment: Text.AlignVCenter

                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    console.log("确认按钮按下")
                                }
                            }
                        }
                    }

                    // 取消按钮
                    Rectangle {
                        Layout.fillHeight: true
                        // Layout.fillWidth: true
                        Layout.preferredWidth: cancelBtn.width
                        color: "transparent"
                        Layout.margins: 16
                        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter

                        Label {
                            id: cancelBtn
                            text: "取消"
                            font.pixelSize: 17
                            font.family: "Alibaba PuHuiTi"
                            color: "#222"
                            verticalAlignment: Text.AlignVCenter

                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    console.log("取消按钮按下")
                                }
                            }
                        }
                    }

                    // 重置按钮
                    Rectangle {
                        Layout.fillHeight: true
                        // Layout.fillWidth: true
                        Layout.preferredWidth: resetBtn.width
                        color: "transparent"
                        Layout.margins: 16
                        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter

                        Label {
                            id: resetBtn
                            text: "重置"
                            font.pixelSize: 17
                            font.family: "Alibaba PuHuiTi"
                            color: "#222"
                            verticalAlignment: Text.AlignVCenter

                            MouseArea {
                                anchors.fill: parent
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    console.log("重置按钮按下", resetBtn.width)
                                }
                            }
                        }
                    }
                }
            }

            // 分割线
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 1
                color: "#E6E6E6"
            }

            // 筛选详情
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.leftMargin: 17
                Layout.bottomMargin: 17

                RowLayout {
                    anchors.fill: parent
                    spacing: 0

                    // 孔位
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        // 孔位ListView
                        ListView {
                            id: kongweiList
                            anchors.fill: parent
                            clip: true
                            spacing: 4
                            model: ["全部孔位", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1", "A1"]
                            delegate: Label {
                                font.family: "Alibaba PuHuiTi"
                                font.pixelSize: 17
                                color: kongweiList.currentIndex === index ? "#2F42CD" : "#222"
                                text: qsTr(modelData)
                            }

                            ScrollBar {

                            }
                        }
                    }

                    // 样本名
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        ListView {
                            id: sampleList
                            anchors.fill: parent
                            clip: true
                            spacing: 4
                            model: ["全部样本名", "Sample1", "Sample2"]
                            delegate: Label {
                                font.family: "Alibaba PuHuiTi"
                                font.pixelSize: 17
                                color: kongweiList.currentIndex === index ? "#2F42CD" : "#222"
                                text: qsTr(modelData)
                            }

                            ScrollBar {

                            }
                        }
                    }

                    // 检测类型
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        ListView {
                            id: jianceList
                            anchors.fill: parent
                            clip: true
                            spacing: 4
                            model: ["全部检测类型", "未知", "标准品", "阴性"]
                            delegate: Label {
                                font.family: "Alibaba PuHuiTi"
                                font.pixelSize: 17
                                color: kongweiList.currentIndex === index ? "#2F42CD" : "#222"
                                text: qsTr(modelData)

                            }

                            ScrollBar {

                            }
                        }
                    }

                    // 荧光染料
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        ListView {
                            id: dyeList
                            anchors.fill: parent
                            clip: true
                            spacing: 4
                            model: ["全部荧光染料", "FAM", "VIC", "ROX", "CY5"]
                            delegate: Label {
                                font.family: "Alibaba PuHuiTi"
                                font.pixelSize: 17
                                color: kongweiList.currentIndex === index ? "#2F42CD" : "#222"
                                text: qsTr(modelData)
                                antialiasing: true
                                clip: true
                                elide: Text.ElideRight
                            }

                            ScrollBar {

                            }
                        }
                    }
                }
            }
        }
    }
}
